<template>
  <el-form
      :model="leaveForm"
      ref="leaveForm"
      :rules="rules">
    <el-form-item label="请假类型" prop="leaveType">
      <el-select
          v-model="leaveForm.leaveType"
          placeholder="请选择请假类型"
          style="width: 100%"
          @change="changeLeaveType"
      >
        <el-option
            v-for="x in leaveTypeDown.down"
            :key="x.leaveTypeNo"
            :label="x.leaveType"
            :value="x.leaveTypeNo"/>
      </el-select>
    </el-form-item>
    <el-form-item label="开始时间" prop="timeOn">
      <el-date-picker
          v-model="leaveForm.timeOn"
          type="datetime"
          placeholder="日期"
          clearable
      />
    </el-form-item>
    <el-form-item label="结束时间" prop="endTime">
      <el-date-picker
          v-model="leaveForm.endTime"
          type="datetime"
          placeholder="日期"
          clearable
      />
    </el-form-item>
    <el-form-item label="是否离校" prop="isLeave">
      <el-switch
          v-model="isleave1"
          inline-prompt
          active-text="是"
          inactive-text="否"
          @change="isleave()"
      />
    </el-form-item>
    <el-form-item label="紧急联系人" prop="emergencyContact" v-model="isleave1"
                  v-if="isleave1===true">
      <el-input v-model="leaveForm.emergencyContact" placeholder="请输入"
                style="position: relative ;left: 13px ; width:500px "></el-input>
    </el-form-item>
    <el-form-item label="目的地" prop="destination" v-model="isleave1"
                  v-if="isleave1===true">
      <el-input v-model="leaveForm.destination" placeholder="请输入"
                style="position: relative ;left: 13px ; width:500px "></el-input>
    </el-form-item>
    <el-form-item label="详细地址" prop="f_address" v-model="isleave1"
                  v-if="isleave1===true">
      <el-input     autosize
                    type="textarea" v-model="leaveForm.f_address" placeholder="请输入"
                style="position: relative ;left: 13px ; width:500px "></el-input>
    </el-form-item>
    <el-form-item label="请假原因" prop="reasonForLeave">
      <el-input     autosize
                    type="textarea" v-model="leaveForm.reasonForLeave" placeholder="请输入"
                style="position: relative ; ; width:500px "></el-input>
    </el-form-item>
    <el-form-item label="&nbsp&nbsp&nbsp抄送人" prop="ccTo">
      <el-input v-model="leaveForm.ccTo" placeholder="请输入"
                style="position: relative ; width:500px "></el-input>
    </el-form-item>
    <el-form-item label="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp定位" prop="fWhere">
      <el-input v-model="leaveForm.f_where" placeholder="请输入"
                style="position: relative ; width:500px "></el-input>
    </el-form-item>
    <el-form-item label="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp定位" prop="f_where">
      <button @click="testget">定位</button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="uploadLeave('leaveForm')">提交</el-button>
      <el-button @click="ChangePassword= false,goBack">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import request from "@/util/request.js";
import {ElMessage} from "element-plus";
import axios from "axios";
import {Bottom} from "@element-plus/icons-vue";
export default {
  components: {Bottom},
  data() {
    return {
      ChangePassword: false,
      information: {},
      //请假类型下拉框表单
      leaveTypeDown: {
        down: [],
      },
      //请假表单
      leaveForm:{
        leaveType: "",
        timeOn: "",
        endTime: "",
        isLeave:"",
        related_file_no:"",
        reasonForLeave:"",
        ccTo:"",
        f_where:"",
        emergencyContact:"",
        destination:"",
        f_address:"",
        accountNo:"",
      },
      //代替表单中的islave
      isleave1:false,
      rules: {
        leaveType: [
          { required: true, message: '请选择请假类型', trigger: 'blur' }
        ],
        timeOn: [
          { required: true, message: '请选择开始时间', trigger: 'blur' }
        ],
        endTime:[
          { required: true, message: '请选择结束时间', trigger: 'blur' }
        ],
        reasonForLeave:[
          { required: true, message: '请输入请假原因', trigger: 'blur' }
        ],
        ccTo:[
          { required: true, message: '请选择抄送人', trigger: 'blur' }
        ],
        f_where:[
          { required: true, message: '请选择结束时间', trigger: 'blur' }
        ],
        emergencyContact:[
          { required: true, message: '请输入紧急联系人电话', trigger: 'blur' }
        ],
        destination:[
          { required: true, message: '请选择目的地', trigger: 'blur' }
        ],
        f_address:[
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
      },
    }
  },
  created() {
    this.getAllLeaveType()
    this.getHeatTeacher()
    this.leaveForm.accountNo=JSON.parse(localStorage.getItem('user')).accountNo;
    this.leaveForm.isLeave="0"
  },
  methods: {
    isleave(){
   if (this.isleave1===true){
     this.leaveForm.isLeave ="1"
   }else {
     this.leaveForm.isLeave="0"
   }
},

    getAllLeaveType(){
      request.get("/info_leave_type/all").then(res => {
        if (res.data.code === '200') {
          this.leaveTypeDown.down = res.data.data;
        }
      })
    },
    changeLeaveType: function (No) {
      this.leaveForm.leaveType= No;
    },
    uploadLeave(val){
      this.$refs[val].validate((valid) => {
        if (valid) {
          request.post("/info_leave/edit", this.leaveForm).then(res => {
            if (this.leaveForm.endTime-this.leaveForm.timeOn>=0) {
              if (res.data.code === '200') {
              this.leaveForm={}
              }
            }
            else {
              ElMessage({
                showClose: true,
                message: '时间格式错误！',
                type: 'warning',
              })
            }
          })
        }
      })
    },
    goBack(){
      this.leaveForm={}
      this.leaveForm.isLeave="0"
      this.isleave1 = false
},
    //得到班主任
    getHeatTeacher(){
      request.get("/info_account/getHeadTeacher?accountNo="+ "22106010224").then(res => {
        if (res.data.code === '200') {
          this.leaveForm.ccTo = res.data.message;
        } else {
          ElMessage({
            showClose: true,
            message: '学号请求班主任失败！',
            type: 'warning',
          })
        }
      })
    },
    testget() {
  axios.get('https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=7DBBZ-Q7DWU-4AQV7-G4FBL-BHXPE-3ZBKV&get_poi=0').then(response => {
  })
},
  }
}

</script>

<style scoped>

</style>
